<template>
    <div class="content" style="width:100vw; height:100%; margin:0 auto; background-color:#fff;">
        <img src="../../assets/bg-image.png" alt="" style="position:absolute; width:100%; height:90vh;">
        <div class="c-main" style="width:60vw; overflow:hidden; z-index:1000;">
            <div class="content-box" style="margin-top:250px;">
              <Row align="middle" :gutter="10" class="header" top="50"></Row>
            </div>
            <div style="width:60vw;">
              <Tabs type="card" value="typeTabs" @on-click="changeOperation" :animated="animated" style="width:60vw;"> 
                <TabPane label="众安科学家" icon="university" name="11">
                    <Table :columns="votePersonalColumns" :data="projectList" style="width:100%;margin-top:-20px;"></Table>
                </TabPane>
                <TabPane label="技术突破奖" icon="arrow-graph-up-right" name="12">
                    <Table :columns="votePersonalColumns" :data="projectList" style="width:100%;margin-top:-20px;"></Table>
                </TabPane>
                <TabPane label="技术创新奖" icon="ribbon-a" name="13">
                    <Table :columns="votePersonalColumns" :data="projectList" style="width:100%;margin-top:-20px;"></Table>
                </TabPane>
                <TabPane label="技术金牛奖" icon="trophy" name="14">
                    <Table :columns="votePersonalColumns" :data="projectList" style="width:100%;margin-top:-20px;"></Table>
                </TabPane>
                <TabPane label="技术品质奖" icon="ribbon-b" name="15">
                    <Table :columns="votePersonalColumns" :data="projectList" style="width:100%;margin-top:-20px;"></Table>
                </TabPane>
                <TabPane label="优秀技术团队" icon="person-stalker" name="20">
                  <Table :columns="voteTeamColumns" :data="projectTeamList" style="width:100%;margin-top:-20px;"></Table>
                </TabPane>
                <TabPane label="附件查看" icon="document-text" name="30" >
                  <div class="docs"><a href="http://wiki.zhonganonline.com/tdown/" target="_blank"> 查看地址：http://wiki.zhonganonline.com/tdown/</a></div>
                </TabPane>
              </Tabs>
              <Modal
                  v-model="modalShow"
                  @on-ok="vote">
                  <p style="text-align:center;font-size:20px;">您确定为该科技成果(个人)投票吗？</p>
                  <p style="text-align:center;font-size:12px;color:red;">*每个奖项投票机会仅有三次</p>
              </Modal>
              <Modal
                  v-model="modalTeam"
                  @on-ok="vote">
                  <p style="text-align:center;font-size:20px;">您确定为该团体投票吗？</p>
                  <p style="text-align:center;font-size:12px;color:red;">*团体科技成果投票机会仅有五次</p>
              </Modal>
        </div>
        <br>
    </div>
  </div>
</template>
<script>
import ProjectAPI from "@/api/project/ProjectAPI";
import ProjectDetail from "@/components/project/ProjectDetail";
import axios from "axios";
export default {
  data() {
    return {
      components: {
        ProjectDetail
      },
      animated:true,
      defaultProjectType: "11",
      text:'投票',
      operation:11,
      modalShow:false,
      modalTeam:false,
      projectList: [],
      projectTeamList: [],
      votePersonalColumns: [
        {
          type: "expand",
          width: 50,
          render: (h, params) => {
            return h(ProjectDetail, {
              props: {
                projectDetail: params.row.description
              }
            });
          }
        },
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: "负责人",
          key: "manager",
        },
        {
          title: "原属部门",
          align:'center',
          key: "originalDeptName",
        },
        {
          title: "现属部门",
          align:'center',
          key: "currentDeptName",
        },
        {
            title: '成员',
            key: 'member',
            width:250,
            align:'center',

        },
        {
          title: '操作',
          key: 'canVote',
          align: 'center',
          render: (h, params) => {
              return h('div', [
                  h('Button', {
                      props: {
                          type: 'primary',
                          size: 'small',
                          disabled:!params.row.canVote,
                      },
                      style: {
                          marginRight: '5px',
                      },
                      on: {
                          click: () => {
                              this.currentId = params.row.id;
                              this.modalShow = true; 
                            }
                      }
                  }, this.text),
              ]);
          }
        },
      ],
      publicityPersonalColumns: [
        {
          type: "expand",
          width: 50,
          render: (h, params) => {
            return h(ProjectDetail, {
              props: {
                projectDetail: params.row.description
              }
            });
          }
        },
        {
            type: 'index',
            width: 60,
            align: 'center'
        },
        {
          title: "负责人",
          key: "manager",
        },
        {
          title: "原属部门",
          key: "originalDeptName",
        },
        {
          title: "现属部门",
          key: "currentDeptName",
          width: 200
        },
        {
            title: '成员',
            key: 'member',
            align:'center',
            width: 200,

        },
        {
          title: "票数",
          align:"center",
          render: (h, params) => {
            return h('Tooltip', {
                props: {
                    placement:'top',
                    transfer:true,
                    content:params.row.voterList
                },
                style:{
                    cursor:'pointer',
                }
            },params.row.voteNum);
          }
        },
      ],
      voteTeamColumns:[
        {
          type: "expand",
          width: 50,
          render: (h, params) => {
            return h(ProjectDetail, {
              props: {
                projectDetail: params.row.description
              }
            });
          }
        },
        {
            type: 'index',
            width: 60,
            align: 'center'
        },
        {
          title: "负责人",
          key: "manager",
          width: 80
        },
        {
          title: "原属部门",
          key: "originalDeptName",
        },
        {
          title: "现属部门",
          key: "currentDeptName",
        },
        {
            title: '成员',
            key: 'member',
            align:'center',
            width: 300,

        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          render: (h, params) => {
              return h('div', [
                  h('Button', {
                      props: {
                          type: 'primary',
                          size: 'small',
                          disabled:!params.row.canVote,
                      },
                      style: {
                          marginRight: '5px',
                      },
                      on: {
                          click: () => {
                            this.currentId = params.row.id;
                            this.modalTeam = true;
                          }
                      }
                  },'投票'),
              ]);
          }
        }
      ],
      publicityTeamColumns:[
        {
          type: "expand",
          width: 50,
          render: (h, params) => {
            return h(ProjectDetail, {
              props: {
                projectDetail: params.row.description
              }
            });
          }
        },
        {
            type: 'index',
            width: 60,
            align: 'center'
        },
        {
          title: "负责人",
          key: "manager",
          width: 80
        },
        {
          title: "原属部门",
          key: "originalDeptName",
        },
        {
          title: "现属部门",
          key: "currentDeptName",
        },
        {
            title: '成员',
            key: 'member',
            align:'center',
            width: 300,

        },
        {
          title: "票数",
          align:"center",
          render: (h, params) => {
            return h('Tooltip', {
                props: {
                    placement:'top',
                    transfer:true,
                    content:params.row.voterList
                },
                style:{
                    cursor:'pointer',
                }
            },params.row.voteNum);
          }
        },
      ],
    };
  },
  mounted() {
    this.fetchProjectList(this.defaultProjectType);
  },
  methods: {
    vote(){
      axios.post(ProjectAPI.vote, {
        projectId:this.currentId ,
         type: this.operation
      })
      .then((res)=>{
        if(res.data.code == '00'){
          this.$Message.success("投票成功")
          this.fetchProjectList(this.operation)
        }
      })
      .catch((err)=>{
        this.$Message.success("错误代码:"+err.data.code)
      });
      
    },
    fetchProjectList(operation) {
        axios
        .get(ProjectAPI.project_vote_list+operation)
        .then((res)=>{
          let stage = 0;
          if(operation == 20){
            this.projectTeamList = res.data.projectDTOList;
            if(this.projectTeamList != null){
              stage = this.projectTeamList[0].stage;
            }
          } else if(operation == 30){
          } else {
            this.projectList = res.data.projectDTOList;
            if(this.projectList != null){
              stage = this.projectList[0].stage;
            }
          }
          // stage 1投票阶段 2公示阶段
          if(stage==2){
            this.votePersonalColumns = this.publicityPersonalColumns;
            this.voteTeamColumns = this.publicityTeamColumns;
          }
        });

    },
    changeOperation(operation) {
      this.operation = operation;
      this.fetchProjectList(operation);
    }
  }
};
</script>
<style scoped>
html, body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.content{
  margin-bottom: 40px;
}
.c-main {
  width: 70vw;
  margin: 0 auto;
  padding-bottom:40px;
  overflow-y: hidden;
  background-color: #fff;
}
.content-box {
  width: 50vw;
  text-align: center;
  overflow: hidden;
}
.docs{
  background:#fff;
  margin-top: -16px;
  font-size: 16px;
  padding:20px 0 20px 5%;
  border-radius: 5px;
}
</style>
